<!--
  @author heguanghua
  @since 2019/06/12 11:57
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common::jscss"/>
<body>

<div class="layui-fluid">

    <blockquote class="layui-crumb">
        渠道管理>
        <a lay-href="/channel/list.action">渠道管理</a>>
        <a th:href="'/channel/detail.action?channelId='+${obj.channelId}">[[${obj.name}]]</a>>
        <zmn th:text="渠道价格">渠道价格</zmn>>
        <zmn th:text="${query.tariffName}">价格表</zmn>
    </blockquote>

    <div class="layui-card">
        <div th:replace="channel/_tab::tab"></div>
        <form method="POST" class="layui-form" action="/channel/price/faultprice/detail/list.action">
            <input type="hidden" name="channelId" th:value="${query.channelId}">
            <input type="hidden" name="tariffId" th:value="${query.tariffId}">
            <input type="hidden" name="keepType" th:value="${query.keepType}">
            <div th:replace="channel/price/faultprice/detail/_query::query"></div>
        </form>
        <div class="layui-card-body">
            <div th:replace="channel/price/faultprice/detail/_table::table"></div>
            <script type="text/html" id="zmn-table-tool">
                <div class="layui-btn-container">
                </div>
            </script>
        </div>

    </div>

</div>
</body>
</html>

<script type="text/javascript" th:inline="javascript">

    var json = {
        channelId: [[${query.channelId}]],
        addFlag: [[${addFlag}]],
    };

    layui.config({
        base: "/static/lay/"
    }).extend({
        index: "lib/index",
    }).use(['index', 'form', 'layer', 'table'], function(){
        let $ = layui.$;
        let form = layui.form;
        let layer = layui.layer;
        let table = layui.table;
        form.render(null, "zmn-form");

        table.init('zmn-table', {
            toolbar: "#zmn-table-tool",
            page: true,
            limit: 50
        });

        zmnProduct.laySelectSpecial(form, $, "/product/listChilds.action",
            "/product/listCateChilds.action",
            "servCategId",
            "categOneId",
            "categId");
    });

    let zmnProduct = {

        laySelectSpecial: function (form, $, url1, url2, selectOneId, selectTwoId, selectThrId) {
            let servCategId;
            let categOneId;
            let servType = '<option value="">-服务分类-</option>';
            let oneLevelType = '<option value="">-1级分类-</option>';
            let twoLevelType = '<option value="">-2级分类-</option>';

            form.on("select(showType)", function (obj) {
                servType = '<option value="">-服务分类-</option>';
                $.ajax({
                    type: "GET", url: "/channel/loadServByShowType.action",
                    dataType: "json", data: {
                        showType: obj.value,
                        channelId: channelId
                    },
                    success: function (items) {
                        console.log(items);
                        items.forEach(item => {
                            servType += '<option value="' + item.value + '">' + item.text + '</option>';
                    });
                        $("#servCategId").html(servType);
                        $("#" + selectTwoId).html(oneLevelType);
                        $("#" + selectThrId).html(twoLevelType);
                        form.render("select");
                    }
                });
            });

            form.on("select(" + selectOneId + ")", function (obj) {
                if (zmnUtil.isNull(obj) || obj.value === 0) {
                    return;
                }
                servCategId = obj.value;
                $.ajax({
                    type: "GET", url: url1,
                    dataType: "json", data: {parentId: servCategId},
                    success: function (items) {
                        items.forEach(item => {
                            oneLevelType += '<option value="' + item[0] + '">' + item[1] + '</option>';
                    });
                        $("#" + selectTwoId).html(oneLevelType);
                        $("#" + selectThrId).html(twoLevelType);
                        form.render("select");
                    }
                });
            });
            if (zmnUtil.isEmptyNull(selectThrId)) {
                return;
            }
            form.on("select(" + selectTwoId + ")", function (obj) {
                if (zmnUtil.isNull(obj) || obj.value === 0) {
                    return;
                }
                categOneId = obj.value;
                $.ajax({
                    type: "GET", url: url2,
                    dataType: "json", data: {categOneId: obj.value, servCategId: servCategId},
                    success: function (items) {
                        items.forEach(item => {
                            twoLevelType += '<option value="' + item[0] + '">' + item[1] + '</option>';
                    });
                        $("#" + selectThrId).html(twoLevelType);
                        form.render("select");
                    }
                });
            });
        },
    };
</script>

